<template>
	<view class="page" v-if="planInfo">
		<view class="background">
			<image class="icon" :src="roundIcon"></image>
		</view>
		<view class="content">
			<view class="header">
				<view class="left" @click="() => changePlan('toggleSchedule')">
					<!--					词库名称-->
					<view class="vocabulary-name">{{ planInfo.thesaurusName }}</view>
					<image class="exchange-icon" :src="exchangeIcon"></image>
				</view>
				<view class="right" @click="() => changePlan('modifyCurrent')">
					<view class="btn">
						<text>更改计划</text>
					</view>
				</view>
			</view>
			<view class="learning-process">
				<!--				当前背到多少天-->
				<view class="current-days">
					<view style="font-size: 30rpx; color: #63676b">Day</view>
					<view style="font-size: 40rpx; color: #f3991f">{{ numberUtils.padZero(planInfo.currentDay) }}</view>
				</view>
				<view class="right">
					<!--					总共要背多少天-->
					<view class="total-days">{{ planInfo.backedDay }}天带背计划</view>
					<!--					进度条-->
					<view class="process-bar">
						<view
							class="content"
							:style="{ width: `${(currentStudyingUnitInfo.currentStudyNum / currentStudyingUnitInfo.wordNumber) * 100}%` }"
						></view>
					</view>
					<!--					今日学习任务-->
					<view class="today-task"
					>今日学习任务：{{ `${currentStudyingUnitInfo.currentStudyNum} / ${currentStudyingUnitInfo.wordNumber}` }}</view
					>
				</view>
			</view>
			
			<view class="app-list">
				<view class="app-item" @click="goToStudy">
					<image class="icon" :src="bookIcon"></image>
					<view class="text">单词学习</view>
				</view>
				
				<view
					class="app-item"
					@click="
            () =>
              $refs.daiBeiAlert.checkAvailable(planInfo.thesaurusId, planInfo.jumpPaidPage).then((res) => {
                if (res) {
                  $uni.navigateTo({
                    url: handleUrlParams('/vocabulary/pages/daiBei/audio/index', {
                      audioUrl: encodeURIComponent(currentStudyingUnitInfo.audioUrl),
                      posterImage: encodeURIComponent(currentStudyingUnitInfo.audioRelatedFile),
                    }),
                  })
                }
              })
          "
				>
					<image class="icon" :src="headPhoneIcon"></image>
					<view class="text">音频带背</view>
				</view>
				
				<view
					class="app-item"
					@click="
            () =>
              $refs.daiBeiAlert.checkAvailable(planInfo.thesaurusId, planInfo.jumpPaidPage).then((res) => {
                if (res) {
                  $uni.navigateTo({
                    url: handleUrlParams('/vocabulary/pages/daiBei/video/index', {
                      videoUrl: encodeURIComponent(currentStudyingUnitInfo.videoUrl),
                      posterImage: encodeURIComponent(currentStudyingUnitInfo.videoRelatedFile),
                    }),
                  })
                }
              })
          "
				>
					<image class="icon" :src="videoIcon"></image>
					<view class="text">视频带背</view>
				</view>
				
				<view
					class="app-item"
					@click="
            () =>
              $refs.daiBeiAlert.checkAvailable(planInfo.thesaurusId, planInfo.jumpPaidPage).then((res) => {
                if (res) {
                  $uni.navigateTo({
                    url: handleUrlParams('/vocabulary/pages/daiBei/documentDownload/index', {
                      fileUrl: encodeURIComponent(currentStudyingUnitInfo.videoRelatedFile),
                    }),
                  })
                }
              })
          "
				>
					<image class="icon" :src="downloadIcon"></image>
					<view class="text">资料下载</view>
				</view>
			</view>
			
			<!--			单元列表-->
			<view class="uni-list">
				<view class="header">
					<view class="title">
						<view class="point"></view>
						<view class="text">学习目录</view>
					</view>
					<!--					重置按钮-->
					<view class="reset-btn" @click="handleResetPlan">
						<image class="icon" :src="resetIcon"></image>
						<view class="text">重置记录</view>
					</view>
				</view>
				<view class="content">
					<view class="item" v-for="item in vocabularyUnitList" :key="item.currentDay">
						<image class="book-icon" :src="bookFillIcon"></image>
						<!--						第几天-->
						<view style="margin-left: 10rpx; font-size: 32rpx">
							<text style="color: #63676b">Day</text>
							<text style="margin-left: 10rpx; color: #31bc84">{{ item.currentDay }}</text>
						</view>
						<!--						单元标题-->
						<!--            <view class="unit-title" v-if="item.currentDay === planInfo.currentDay || item.currentStudyNum > 0">{{-->
						<!--              `当前已学 ${item.currentStudyNum} / ${item.wordNumber} 词`-->
						<!--            }}</view>-->
						<!--            <view class="unit-title" v-else>{{ `共 ${item.wordNumber} 词` }}</view>-->
						<view class="unit-title">{{ `共 ${item.currentStudyNum} / ${item.wordNumber} 词` }}</view>
						<!--						当前在学提示-->
						<view class="current-study-tip" v-if="item.currentDay === planInfo.currentDay">当前在学</view>
						<!--						前往按钮-->
						<!--						当前正在学的无前往按钮-->
						<view class="goto-btn" @click="() => switchDays(item.currentDay)" v-else>
							<!--							已完成 icon-->
							<image class="icon" :src="finishedIcon" v-if="item.isComplete === 1"></image>
							<text>前往</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="bottom-tips">
				<text class="text">- 完成后可【重置】反复背记 -</text>
			</view>
		</view>
		
		<tipPopups ref="tipPopups"></tipPopups>
		<daiBeiAlert ref="daiBeiAlert"></daiBeiAlert>
	</view>
</template>

<script>
import exchangeIcon from "../assets/exchange.svg"
import roundIcon from "../assets/round-icon.png"
import bookIcon from "../assets/book.png"
import downloadIcon from "../assets/download.png"
import headPhoneIcon from "../assets/headPhone.png"
import videoIcon from "../assets/video.png"
import bookFillIcon from "../assets/book_fill.png"
import finishedIcon from "../assets/finished_btn.png"
import tipPopups from "@/vocabulary/pages/daiBei/planInfo/components/tipPopups.vue"
import store from "@/store"
import { vocabularyLearningActionType } from "@/store/modules/vocabularyLearning"
import request from "@/utils/request"
import numberUtils from "@/utils/numberUtils"
import { cloneDeep, getShowImage, handleUrlParams, showModalPromise, showToast } from "@/utils"
import daiBeiAlert from "@/components/daiBeiAlert.vue"
import { userActionType } from "@/store/modules/user"
import urlUtils from "@/utils/urlUtils"
import resetIcon from "../assets/reset.png"

export default {
	computed: {
		numberUtils() {
			return numberUtils
		},
		currentStudyingUnitInfo() {
			return this.vocabularyUnitList.find((item) => item.currentDay === this.planInfo.currentDay)
		},
	},
	methods: {
		handleUrlParams,
		async init() {
			await this.getDaiBeiPlanInfo()
			await this.getCurrentDayInfo()
		},
		//更改计划
		changePlan(currentTab) {
			uni.navigateTo({
				url: handleUrlParams("/vocabulary/pages/makeLearningPlan/schedule", {
					currentTab: currentTab,
				}),
			})
		},
		async goToStudy() {
			if (!(await this.$refs.daiBeiAlert.checkAvailable(this.planInfo.thesaurusId, this.planInfo.jumpPaidPage))) {
				return
			}
			uni.navigateTo({
				url: handleUrlParams("/vocabulary/pages/learning/daiBei", {
					backedPlanId: this.currentStudyingUnitInfo.backedPlanId,
					currentStudyNum: this.currentStudyingUnitInfo.currentStudyNum,
				}),
			})
		},
		// 获取带背计划信息
		async getDaiBeiPlanInfo() {
			this.vocabularyUnitList = await request({
				url: "thesaurus/getBackedPlanDetails",
				data: {
					thesaurusId: this.planInfo.thesaurusId,
					planId: this.planInfo.planId,
				},
				showLoading: true,
				errorHandle: true,
			})
		},
		// 获取某天的单元信息（切换单元）
		async switchDays(day) {
			await this.$refs.tipPopups.open(this.planInfo.currentDay, day)
			await this.getCurrentDayInfo(day)
		},
		async getCurrentDayInfo(day = this.planInfo.currentDay) {
			const data = await request({
				url: "thesaurus/getBackedCurrentDayInfo",
				data: {
					thesaurusId: this.planInfo.thesaurusId,
					currentDay: day,
					planId: this.planInfo.planId,
				},
				showLoading: true,
				errorHandle: true,
			})
			this.planInfo.currentDay = day
			// 赋值资料信息给当前单元
			for (let dataKey in data) {
				this.currentStudyingUnitInfo[dataKey] = data[dataKey]
			}
		},
		// 重置计划
		async handleResetPlan() {
			try {
				await showModalPromise({
					title: "提示",
					content: "确定要重置当前的学习进度吗？",
				})
				await request({
					url: "userCheckPlan/resetPlan",
					data: {
						planId: this.planInfo.planId,
					},
					showLoading: true,
				})
				await this.init()
				showToast.default("重置成功")
			} catch (e) {
				console.log(e, "e")
			}
		},
	},
	data() {
		return {
			exchangeIcon,
			roundIcon,
			bookIcon,
			downloadIcon,
			headPhoneIcon,
			videoIcon,
			bookFillIcon,
			finishedIcon,
			resetIcon,
			vocabularyUnitList: [],
			planInfo: {},
			// 供父级组件调用，页面显示时触发
			async onPageShow() {
				await this.init()
			},
			setPlanInfo(planInfo) {
				this.planInfo = planInfo
			}
		}
	},
	components: { tipPopups, daiBeiAlert },
}
</script>

<style scoped lang="scss">
.page {
	position: relative;
	> .background {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 368rpx;
		background: #3cc98f;
		> .icon {
			position: absolute;
			right: 0;
			top: 0;
			width: 200rpx;
			height: 95.12rpx;
		}
	}
	> .content {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		padding: {
			left: 30rpx;
			right: 30rpx;
			top: 40rpx;
			bottom: calc(40rpx + env(safe-area-inset-bottom));
		}
		> .header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			> .left {
				display: flex;
				align-items: center;
				width: 0;
				flex: 1;
				> .vocabulary-name {
					font-size: 36rpx;
					color: #fff;
					font-weight: bold;
					// 文本溢出自动加省略号
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				> .exchange-icon {
					width: 40rpx;
					height: 40rpx;
					margin-left: 10rpx;
				}
			}
			> .right {
				margin-left: 20rpx;
				> .btn {
					font-size: 32rpx;
					color: white;
					padding: 10rpx 40rpx;
					border: 2rpx solid white;
					border-radius: 33rpx;
					display: flex;
					align-items: center;
				}
			}
		}
		> .learning-process {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			height: 110rpx;
			> .current-days {
				background: white;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 110rpx;
				height: 100%;
			}
			> .right {
				width: 0;
				flex: 1;
				margin-left: 30rpx;
				color: white;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				> .total-days {
					font-size: 30rpx;
				}
				> .process-bar {
					width: 100%;
					height: 6rpx;
					border-radius: 3rpx;
					background: #b7e4d2;
					position: relative;
					overflow: hidden;
					> .content {
						background: #f3991f;
						position: absolute;
						left: 0;
						top: 0;
						height: 100%;
						border-radius: 3rpx;
					}
				}
				> .today-task {
					font-size: 28rpx;
				}
			}
		}
		> .app-list {
			margin-top: 40rpx;
			background: white;
			border-radius: 20rpx;
			box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
			padding: 20rpx;
			display: flex;
			justify-content: space-around;
			position: relative;
			// 在左上角绘制一个三角形
			&::before {
				content: "";
				position: absolute;
				left: calc((110rpx / 2) - (50rpx / 2));
				top: -20rpx;
				width: 0;
				height: 0;
				border-left: 25rpx solid transparent;
				border-right: 25rpx solid transparent;
				border-bottom: 50rpx solid white;
			}
			> .app-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				> .icon {
					width: 50rpx;
					height: 50rpx;
				}
				> .text {
					font-size: 30rpx;
					color: #63676b;
					margin-top: 10rpx;
				}
			}
		}
		> .uni-list {
			margin-top: 50rpx;
			> .header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				> .title {
					display: flex;
					align-items: center;
					> .point {
						width: 10rpx;
						height: 30rpx;
						border-radius: 5rpx;
						background: #2cb980;
					}
					> .text {
						font-size: 34rpx;
						font-weight: bold;
						margin-left: 14rpx;
					}
				}
				> .reset-btn {
					padding: 5rpx 20rpx;
					display: flex;
					align-items: center;
					border: 2rpx solid #125c3e;
					border-radius: 25rpx;
					> .icon {
						width: 28rpx;
						height: 28rpx;
					}
					> .text {
						margin-left: 10rpx;
						font-size: 26rpx;
						color: #125c3e;
					}
				}
			}
			> .content {
				margin-top: 20rpx;
				> .item {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.14);
					> .book-icon {
						width: 40rpx;
						height: 40rpx;
					}
					> .unit-title {
						width: 0;
						flex: 1;
						// 文本溢出自动加省略号
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-left: 24rpx;
						font-size: 30rpx;
					}
					> .current-study-tip {
						color: var(--text-color-theme);
						font-size: 30rpx;
					}
					> .goto-btn {
						padding: 5rpx 14rpx;
						font-size: 28rpx;
						border-radius: 25rpx;
						border: 2rpx solid rgba(136, 136, 136, 1);
						color: rgba(136, 136, 136, 1);
						position: relative;
						> .icon {
							position: absolute;
							width: 24rpx;
							height: 24rpx;
							right: -8rpx;
							top: -8rpx;
							background: white;
							border-radius: 50%;
						}
					}
				}
			}
		}
		
		> .bottom-tips {
			margin-top: 30rpx;
			text-align: center;
			color: #888888;
			font-size: 30rpx;
		}
	}
}
</style>
